.home-hero-container
  @apply relative

.home-hero-slide
  @apply relative
  @apply pt-16
  @apply bg-cover
  @apply bg-center
  @apply bg-no-repeat
  height 550px

  &__inner
    @apply relative
    @apply max-w-7xl
    @apply mx-auto
    @apply h-full
    @apply pt-32

  &__title
    @apply relative
    @apply text-5xl
    @apply font-bold
    @apply text-white

  &__desc
    @apply relative
    @apply text-lg
    @apply leading-8
    @apply text-white

  &__bg
    @apply absolute
    @apply top-0

    &[data-index="0"]
      right -330px

    &[data-index="1"]
      right -60px

    &[data-index="2"]
      right -90px

    &[data-index="3"]
      right -160px

    &[data-index="4"]
      right -100px

  &[data-swiper-slide-index="0"]
    background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAg1f7qtQYoipG9qAMwgA84xAQ.png')

  &[data-swiper-slide-index="1"]
    background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAg1f7qtQYovJjq4QEwgA84xAQ.png')

  &[data-swiper-slide-index="2"]
    background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAg1f7qtQYolLeYvQcwgA84xAQ.png')

  &[data-swiper-slide-index="3"]
    background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAg1f7qtQYokIOr3AEwgA84xAQ.png')

  &[data-swiper-slide-index="4"]
    background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAg1f7qtQYo5JTd8gQwgA84xAQ.png')

  &[data-swiper-slide-index="5"]
    background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAg1f7qtQYomM7GgwIwgA84xAQ.png')

.home-service
  @apply max-w-7xl
  @apply mx-auto
  @apply text-center
  @apply space-y-8

  &__title
    @apply text-4xl
    @apply font-bold

  &__desc
    @apply max-w-4xl
    @apply mx-auto
    @apply text-base
    @apply text-neutral-500
    line-height 24px

.home-product
  @apply max-w-7xl
  @apply mx-auto
  @apply pt-12
  @apply grid
  @apply grid-cols-4
  @apply gap-7

.home-devops
  @apply pt-12

.home-devops-card
  @apply flex
  @apply flex-col
  @apply gap-y-5

  &__title
    @apply text-3xl
    @apply text-center

  &:nth-child(even)
    @apply flex-col-reverse

.home-market
  @apply flex items-center gap-x-5

.home-market-item
  @apply flex
  @apply flex-1
  @apply items-center
  @apply p-4
  @apply gap-x-4
  @apply rounded
  background-color rgb(250,250,250)

  &__inner
    @apply flex flex-col gap-y-2

  &__icon
    @apply w-12 aspect-square

.home-scheme
  @apply pt-16
  @apply pb-24

  &--bg
    background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAgn8L2lwYos-D-3wMwgA84tAY.png')
    background-repeat no-repeat

  &__title
    @apply text-4xl
    @apply font-bold text-center

.home-scheme-tab
  @apply relative
  @apply flex
  @apply mt-12
  @apply gap-x-8

  &:after
    @apply absolute
    @apply bottom-0
    @apply w-full
    @apply block
    @apply border-t-2
    content ''

  &__content
    @apply relative
    @apply mt-24
    height 472px

  &__item
    @apply relative
    @apply z-10
    @apply inline-flex
    @apply flex-1
    @apply h-10
    @apply font-bold text-neutral-500
    @apply justify-center items-center

    &:after
      @apply absolute
      @apply bottom-0
      @apply opacity-0
      @apply w-full
      @apply block
      @apply border-t-2
      @apply border-primary
      @apply transition-opacity
      content ''

    &.active
      @apply text-neutral-800

      &:after
        @apply opacity-100

.home-scheme-container
  @apply absolute
  @apply inset-0
  @apply opacity-0
  @apply flex gap-x-4
  @apply transition-opacity
  @apply duration-300
  @apply ease-linear

  &.active
    @apply z-10
    @apply opacity-100

.home-scheme-pane
  @apply flex flex-1
  @apply relative
  @apply p-10
  @apply rounded-md
  @apply shadow-lg
  @apply bg-white
  @apply gap-x-7

  &__inner
    @apply flex
    @apply flex-col
    @apply gap-x-4

  &__title
    @apply text-xl
    @apply font-bold

  &__desc
    @apply mt-7
    @apply text-neutral-500
    line-height 25px

  &__news
    @apply w-56

.home-scheme-pane-side
  @apply flex
  @apply flex-col
  @apply relative
  @apply py-10
  @apply rounded-md
  @apply shadow-lg
  @apply w-56
  @apply bg-white

.home-slogan
  @apply py-20
  @apply text-center
  @apply bg-no-repeat
  @apply bg-cover
  background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAg2oX8lwYo5LfQ7gIwgA84oAE.png')

.home-advantage-container
  @apply relative
  @apply flex
  @apply gap-x-6

.home-advantage-card
  @apply relative
  @apply px-9
  @apply py-14
  @apply bg-no-repeat
  width 384px
  background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAgk-77lwYo3u6FiQUwgAM4tAQ.png.webp')

  &__title
    @apply text-white
    @apply text-xl
    @apply font-bold

  &__desc
    @apply text-neutral-200
    @apply text-sm
    @apply mt-6

  &__item
    @apply text-neutral-200
    @apply text-sm

    &:before
      @apply inline-block
      @apply size-2
      @apply ring-1
      @apply rounded-full
      @apply ring-neutral-200
      @apply mr-4
      content ''

.home-advantage-item
  @apply space-y-4
  @apply px-14
  @apply py-6
  @apply rounded-md
  background-color rgb(247,246,253)

.home-used-container
  @apply bg-no-repeat
  @apply bg-cover
  background-image url('https://19838323.s21i.faiusr.com/4/4/ABUIABAEGAAgqp6ljgYo0L3O1QIwgA847AQ.png')

.home-product-milepost
  @apply relative
  @apply flex
  @apply justify-center

  &__line
    @apply absolute
    @apply top-1/2
    @apply -translate-y-1/2

  &__badge
    @apply relative
    @apply size-6
    @apply bg-white
    @apply rounded-full
    @apply shadow-md

  &__item
    @apply absolute
    @apply flex
    @apply flex-col
    @apply gap-y-4
    @apply items-center

    &:nth-of-type(even)
      @apply flex-col-reverse

    &:first-of-type
      @apply w-80
      bottom -10px
      left 40px

    &:nth-of-type(2)
      @apply w-80
      top 8rem
      left 17rem

    &:nth-of-type(3)
      @apply w-80
      @apply bottom-16
      left 28rem

    &:nth-of-type(4)
      @apply w-80
      top 1.5rem
      left 43rem

    &:nth-of-type(5)
      @apply w-80
      bottom 9rem
      left 54rem

    &:last-of-type
      @apply w-24
      top 34px
      right 34px

.home-plan-card
  @apply relative
  @apply pt-36
  @apply pb-14
  @apply px-20
  @apply bg-no-repeat

  &__title
    @apply absolute
    @apply top-16
    @apply text-2xl
    @apply font-bold

    &:after
      @apply absolute
      @apply -bottom-4
      @apply block
      @apply border-t-4
      @apply border-primary
      @apply w-12
      content ''

  &__item
    @apply flex
    @apply items-start
    @apply gap-x-6
